import { RefreshCcwIcon, SearchIcon } from "lucide-react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Input } from "../ui/input";

const events = [
	{
		title: "Team Sync Meeting",
		from: "2025-06-12T09:00:00",
		to: "2025-06-12T10:00:00",
	},
	{
		title: "Design Review",
		from: "2025-06-12T11:30:00",
		to: "2025-06-12T12:30:00",
	},
	{
		title: "Client Presentation",
		from: "2025-06-12T14:00:00",
		to: "2025-06-12T15:00:00",
	},
];

export function ReportsCalendar() {
	const [date, setDate] = React.useState<Date | undefined>(
		new Date(2025, 5, 12),
	);

	return (
		<Card className="w-fit py-4 h-full">
			<CardContent className="px-4">
				<Calendar
					mode="single"
					selected={date}
					onSelect={setDate}
					className="bg-transparent p-0"
					required
				/>
			</CardContent>
			<CardFooter className="flex flex-col items-start gap-3 border-t px-4 !pt-4">
				<div className="text-sm font-medium">
					{date?.toLocaleDateString("zh-CN", {
						day: "numeric",
						month: "long",
						year: "numeric",
					})}
				</div>
				<div className="flex w-full flex-col gap-4">
					<div className="*:not-first:mt-2">
						<div className="relative">
							<Input
								className="peer ps-7 h-8"
								placeholder="task title..."
								type="search"
							/>
							<div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 peer-disabled:opacity-50">
								<SearchIcon size={14} />
							</div>
						</div>
					</div>
					<div className="flex flex-col gap-2">
						{events.map((event) => (
							<div
								key={event.title}
								className="bg-accent/50 hover:bg-accent hover:cursor-pointer rounded-md p-2 text-sm"
							>
								<div className="font-medium">{event.title}</div>
							</div>
						))}
					</div>
				</div>
			</CardFooter>
		</Card>
	);
}
